<template>
  <div class="app-container">
    <el-form ref="filterForm" :model="list.filter" inline>
      <el-form-item prop="areaCode">
        <AllRegionSelect
          v-model="list.filter.areaCode"
          :props="{ checkStrictly: true }"
        />
      </el-form-item>

      <el-form-item prop="hotelId">
        <el-select
          v-model="list.filter.hotelId"
          placeholder="所属酒店"
          style="width: 100%"
          clearable
          filterable
        >
          <el-option
            v-for="item in options.hotelList"
            :key="item.hotelId"
            :label="item.hotelName"
            :value="item.hotelId"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="roomTypeName">
        <el-input
          v-model.trim="list.filter.roomTypeName"
          placeholder="房型名称"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>

      <el-form-item prop="merchantId" v-if="userInfo && userInfo.userType == 0">
        <el-select
          v-model="list.filter.merchantId"
          placeholder="所属商户"
          style="width: 100%"
          clearable
          filterable
          @change="queryHotel"
        >
          <el-option
            v-for="item in options.merchantOpt"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          @click="
            () => {
              $refs.filterForm.resetFields();
            }
          "
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <div>
        <auth-button name="新增" @click="c()" />
        <!-- <auth-button
          @click="exportExcel()"
          :loading="exportListLoading"
          name="导出"
        /> -->
        <ExportExcel
          url="/sot-admin-api/hotel/self/roomTypeInfo/export"
          :param="list.filter"
        />
      </div>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table
      stripe
      v-loading="list.loading"
      :data="list.data"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" type="index" />
      <el-table-column label="房型名称" prop="roomTypeName" />
      <el-table-column label="面积" prop="areaRange" />
      <el-table-column label="最大入住人数" prop="capacity" />
      <el-table-column label="所在楼层" prop="floorRange" />
      <el-table-column label="是否有窗" prop="windowFlagName" />
      <el-table-column label="产品数量" prop="roomNum" />
      <el-table-column label="所属酒店" prop="hotelName" />
      <el-table-column label="所属商户" prop="merchantName" />
      <!-- <el-table-column label="房型状态" prop="status">
        <template slot-scope="{ row }">
          <el-tag type="danger" v-if="row.status == 0">禁用</el-tag>
          <el-tag v-if="row.status == 1">正常</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column label="房型状态" width="80" align="center">
        <template slot-scope="{ row: { id, status } }">
          <KiPopSwitch
            v-bind="popSwitchProps(status)"
            @change="updateStatus({ id, status: status ^ 1 })"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        class-name="small-padding"
        align="center"
        width="200"
      >
        <template slot-scope="{ row }">
          <auth-button @click="r({ id: row.id })" name="查看" />
          <auth-button @click="u({ id: row.id })" name="编辑" />
          <!-- <auth-button name="启用" v-if="row.status == 0" @click="updateStatus({ id: row.id , status: 1 })" />
          <auth-button name="停用" v-if="row.status == 1" @click="updateStatus({ id: row.id , status: 0})" />
           -->
          <!-- <auth-button
            v-if="row.status < 2"
            @click="updateStatus({ id: row.id, status: row.status ^ 1 })"
            :name="row.status ? '停用' : '启用'"
          /> -->
          <auth-button name="删除" @click="d({ id: row.id })" />
        </template>
      </el-table-column>
    </el-table>

    <!-- 详情弹框(查看、编辑、删除) -->
    <detailDialog
      :form="form"
      :submitForm="submitForm"
      @refresh="refresh"
      ref="detailDialogRef"
    ></detailDialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import detailDialog from "./components/detail";

export default {
  mixins: [pageMixin],
  components: {
    detailDialog,
  },
  computed: {
    ...mapGetters(["areaTree", "userInfo"]),
  },
  setup: () => useAdmateAdapter({
    urlPrefix: 'sot-admin-api/hotel/self/roomTypeInfo'
  }, {
    validateFormData() {
      // 由于已在 detailDialog 中自行校验，这里放过
      return Promise.resolve()
    },
  }),
  data() {
    return {
      exportListLoading: false,
      options: {
        hotelList: null,
        merchantOpt: [],
      },
    };
  },
  watch: {
    "list.filter.areaCode": {
      handler(nv, ov) {
        if ((nv && !ov) || (!nv && ov)) this.queryHotel(nv);
      },
      immediate: false,
      deep: true,
    },
  },
  created() {
    // 查询酒店数据
    this.queryHotel();
    if (this.userInfo && this.userInfo.userType == 0) {
      // 查询所属商户数据
      this.queryMerchant();
    }
  },
  methods: {
    // /**
    //  * 导出
    //  * @return Void
    //  */
    // exportExcel() {
    //   if (this.exportListLoading) {
    //     return false;
    //   }
    //   this.exportListLoading = true;
    //   this.$POST.download("sot-admin-api/hotel/self/roomTypeInfo/export", this.list.filter, {
    //     method: "POST",
    //   }).finally((e) => {
    //     this.exportListLoading = false;
    //   });
    // },
    /**
     * 查询所属商户数据
     * @return Void
     */
    queryMerchant() {
      this.$POST(
        "sot-admin-api/merchant/merchant/queryListForNoPermission",{}
      ).then((_) => {
        this.options.merchantOpt = _.data;
      });
    },
    /**
     * 查询关联商户已创建且审核通过的酒店数据
     * @return Void
     */
    queryHotel() {
      const filter = this.list.filter;
      this.$POST("sot-admin-api/hotel/self-employed/queryForList", {
        areaCode: filter.areaCode, // 区(标准编码)
        merchantId: filter.merchantId,
        // status : 1, // 1正常,0为禁用 (不需要管是否禁用)
        reviewStatus: 3, // 审核通过
      })
        .then(({ data }) => {
          if (data && data.length > 0) {
            this.$set(this.options, "hotelList", data);
          } else {
            this.$set(this.options, "hotelList", []);
          }
        })
        .finally((e) => {});
    },
    refresh() {
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
